<template>
  <div class="switchBox" :style="{ height: height + 'px' }">
    <div class="switchBoxCon">
      <h5>功能开关</h5>
      <p>设置启用的系统功能和使用范围</p>
      <ul class="mTop12">
        <li class="isOpen">
          <a-switch size="small" v-model="options.add.visible"></a-switch>
          <span class="con flexRow"
            ><a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-input
                  placeholder="请输入名称"
                  v-model="options.add.label"
                ></a-input>
              </template>
              <template slot="title">
                <span>编辑名称</span>
              </template>
              {{ options.add.label }}
            </a-popover>
            <a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-radio-group v-model="options.add.type">
                  <a-radio :style="radioStyle" value="all"> 所有视图 </a-radio>
                  <a-radio :style="radioStyle" value="view">
                    应用于指定的视图
                  </a-radio>
                </a-radio-group>
                <div class="margin-left" v-if="options.add.type == 'view'">
                  <a-checkbox-group v-model="options.add.view">
                    <a-checkbox
                      v-for="item in views"
                      :key="item.zeroCodeId"
                      :value="item.zeroCodeId"
                      :style="radioStyle"
                      ><a-icon :type="item.icon"></a-icon>
                      {{ item.name }}</a-checkbox
                    ></a-checkbox-group
                  >
                </div>
              </template>
              <template slot="title">
                <span>使用视图</span>
              </template>
              <span class="Gray_bd Right text"
                >{{
                  options.add.type == "view"
                    ? options.add.view.length > 0
                      ? options.add.view.length + "个视图"
                      : "应用于指定的视图"
                    : "所有视图"
                }}
                <a-icon type="right"></a-icon
              ></span>
            </a-popover>
          </span>
        </li>
        <li class="isOpen">
          <a-switch size="small" v-model="options.edit.visible"></a-switch>
          <span class="con flexRow"
            ><a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-input
                  placeholder="请输入名称"
                  v-model="options.edit.label"
                ></a-input>
              </template>
              <template slot="title">
                <span>编辑名称</span>
              </template>
              {{ options.edit.label }}
            </a-popover>
            <a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-radio-group v-model="options.edit.type">
                  <a-radio :style="radioStyle" value="all"> 所有视图 </a-radio>
                  <a-radio :style="radioStyle" value="view">
                    应用于指定的视图
                  </a-radio>
                </a-radio-group>
                <div class="margin-left" v-if="options.edit.type == 'view'">
                  <a-checkbox-group v-model="options.edit.view">
                    <a-checkbox
                      v-for="item in views"
                      :key="item.zeroCodeId"
                      :value="item.zeroCodeId"
                      :style="radioStyle"
                      ><a-icon :type="item.icon"></a-icon>
                      {{ item.name }}</a-checkbox
                    ></a-checkbox-group
                  >
                </div>
              </template>
              <template slot="title">
                <span>使用视图</span>
              </template>
              <span class="Gray_bd Right text"
                >{{
                  options.edit.type == "view"
                    ? options.edit.view.length > 0
                      ? options.edit.view.length + "个视图"
                      : "应用于指定的视图"
                    : "所有视图"
                }}
                <a-icon type="right"></a-icon
              ></span>
            </a-popover>
          </span>
        </li>
        <li class="isOpen">
          <a-switch size="small" v-model="options.delete.visible"></a-switch>
          <span class="con flexRow"
            ><a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-input
                  placeholder="请输入名称"
                  v-model="options.delete.label"
                ></a-input>
              </template>
              <template slot="title">
                <span>编辑名称</span>
              </template>
              {{ options.delete.label }}
            </a-popover>
            <a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-radio-group v-model="options.delete.type">
                  <a-radio :style="radioStyle" value="all"> 所有视图 </a-radio>
                  <a-radio :style="radioStyle" value="view">
                    应用于指定的视图
                  </a-radio>
                </a-radio-group>
                <div class="margin-left" v-if="options.delete.type == 'view'">
                  <a-checkbox-group v-model="options.delete.view">
                    <a-checkbox
                      v-for="item in views"
                      :key="item.zeroCodeId"
                      :value="item.zeroCodeId"
                      :style="radioStyle"
                      ><a-icon :type="item.icon"></a-icon>
                      {{ item.name }}</a-checkbox
                    ></a-checkbox-group
                  >
                </div>
              </template>
              <template slot="title">
                <span>使用视图</span>
              </template>
              <span class="Gray_bd Right text"
                >{{
                  options.delete.type == "view"
                    ? options.delete.view.length > 0
                      ? options.delete.view.length + "个视图"
                      : "应用于指定的视图"
                    : "所有视图"
                }}
                <a-icon type="right"></a-icon
              ></span>
            </a-popover>
          </span>
        </li>
        <li class="isOpen">
          <a-switch size="small" v-model="options.copy.visible"></a-switch>
          <span class="con flexRow"
            ><a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-input
                  placeholder="请输入名称"
                  v-model="options.copy.label"
                ></a-input>
              </template>
              <template slot="title">
                <span>编辑名称</span>
              </template>
              {{ options.copy.label }}
            </a-popover>
            <a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-radio-group v-model="options.copy.type">
                  <a-radio :style="radioStyle" value="all"> 所有视图 </a-radio>
                  <a-radio :style="radioStyle" value="view">
                    应用于指定的视图
                  </a-radio>
                </a-radio-group>
                <div class="margin-left" v-if="options.copy.type == 'view'">
                  <a-checkbox-group v-model="options.copy.view">
                    <a-checkbox
                      v-for="item in views"
                      :key="item.zeroCodeId"
                      :value="item.zeroCodeId"
                      :style="radioStyle"
                      ><a-icon :type="item.icon"></a-icon>
                      {{ item.name }}</a-checkbox
                    ></a-checkbox-group
                  >
                </div>
              </template>
              <template slot="title">
                <span>使用视图</span>
              </template>
              <span class="Gray_bd Right text"
                >{{
                  options.copy.type == "view"
                    ? options.copy.view.length > 0
                      ? options.copy.view.length + "个视图"
                      : "应用于指定的视图"
                    : "所有视图"
                }}
                <a-icon type="right"></a-icon
              ></span>
            </a-popover>
          </span>
        </li>
        <li class="isOpen">
          <a-switch size="small" v-model="options.import.visible"></a-switch>
          <span class="con flexRow"
            ><a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-input
                  placeholder="请输入名称"
                  v-model="options.import.label"
                ></a-input>
              </template>
              <template slot="title">
                <span>编辑名称</span>
              </template>
              {{ options.import.label }}
            </a-popover>
            <a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-radio-group v-model="options.import.type">
                  <a-radio :style="radioStyle" value="all"> 所有视图 </a-radio>
                  <a-radio :style="radioStyle" value="view">
                    应用于指定的视图
                  </a-radio>
                </a-radio-group>
                <div class="margin-left" v-if="options.import.type == 'view'">
                  <a-checkbox-group v-model="options.import.view">
                    <a-checkbox
                      v-for="item in views"
                      :key="item.zeroCodeId"
                      :value="item.zeroCodeId"
                      :style="radioStyle"
                      ><a-icon :type="item.icon"></a-icon>
                      {{ item.name }}</a-checkbox
                    ></a-checkbox-group
                  >
                </div>
              </template>
              <template slot="title">
                <span>使用视图</span>
              </template>
              <span class="Gray_bd Right text"
                >{{
                  options.import.type == "view"
                    ? options.import.view.length > 0
                      ? options.import.view.length + "个视图"
                      : "应用于指定的视图"
                    : "所有视图"
                }}
                <a-icon type="right"></a-icon
              ></span>
            </a-popover>
          </span>
        </li>
        <li class="isOpen">
          <a-switch size="small" v-model="options.export.visible"></a-switch>
          <span class="con flexRow"
            ><a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-input
                  placeholder="请输入名称"
                  v-model="options.export.label"
                ></a-input>
              </template>
              <template slot="title">
                <span>编辑名称</span>
              </template>
              {{ options.export.label }}
            </a-popover>
            <a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-radio-group v-model="options.export.type">
                  <a-radio :style="radioStyle" value="all"> 所有视图 </a-radio>
                  <a-radio :style="radioStyle" value="view">
                    应用于指定的视图
                  </a-radio>
                </a-radio-group>
                <div class="margin-left" v-if="options.export.type == 'view'">
                  <a-checkbox-group v-model="options.export.view">
                    <a-checkbox
                      v-for="item in views"
                      :key="item.zeroCodeId"
                      :value="item.zeroCodeId"
                      :style="radioStyle"
                      ><a-icon :type="item.icon"></a-icon>
                      {{ item.name }}</a-checkbox
                    ></a-checkbox-group
                  >
                </div>
              </template>
              <template slot="title">
                <span>使用视图</span>
              </template>
              <span class="Gray_bd Right text"
                >{{
                  options.export.type == "view"
                    ? options.export.view.length > 0
                      ? options.export.view.length + "个视图"
                      : "应用于指定的视图"
                    : "所有视图"
                }}
                <a-icon type="right"></a-icon
              ></span>
            </a-popover>
          </span>
        </li>
        <li class="isOpen">
          <a-switch size="small" v-model="options.print.visible"></a-switch>
          <span class="con flexRow"
            ><a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-input
                  placeholder="请输入名称"
                  v-model="options.print.label"
                ></a-input>
              </template>
              <template slot="title">
                <span>编辑名称</span>
              </template>
              {{ options.print.label }}
            </a-popover>
            <a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-radio-group v-model="options.print.type">
                  <a-radio :style="radioStyle" value="all"> 所有视图 </a-radio>
                  <a-radio :style="radioStyle" value="view">
                    应用于指定的视图
                  </a-radio>
                </a-radio-group>
                <div class="margin-left" v-if="options.print.type == 'view'">
                  <a-checkbox-group v-model="options.print.view">
                    <a-checkbox
                      v-for="item in views"
                      :key="item.zeroCodeId"
                      :value="item.zeroCodeId"
                      :style="radioStyle"
                      ><a-icon :type="item.icon"></a-icon>
                      {{ item.name }}</a-checkbox
                    ></a-checkbox-group
                  >
                </div>
              </template>
              <template slot="title">
                <span>使用视图</span>
              </template>
              <span class="Gray_bd Right text"
                >{{
                  options.print.type == "view"
                    ? options.print.view.length > 0
                      ? options.print.view.length + "个视图"
                      : "应用于指定的视图"
                    : "所有视图"
                }}
                <a-icon type="right"></a-icon
              ></span>
            </a-popover>
          </span>
        </li>
        <li class="isOpen">
          <a-switch size="small" v-model="options.recycle.visible"></a-switch>
          <span class="con flexRow"
            ><a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-input
                  placeholder="请输入名称"
                  v-model="options.recycle.label"
                ></a-input>
              </template>
              <template slot="title">
                <span>编辑名称</span>
              </template>
              {{ options.recycle.label }}
            </a-popover>
            <a-popover placement="rightTop" trigger="click">
              <template slot="content">
                <a-radio-group v-model="options.recycle.type">
                  <a-radio :style="radioStyle" value="all"> 所有视图 </a-radio>
                  <a-radio :style="radioStyle" value="view">
                    应用于指定的视图
                  </a-radio>
                </a-radio-group>
                <div class="margin-left" v-if="options.recycle.type == 'view'">
                  <a-checkbox-group v-model="options.recycle.view">
                    <a-checkbox
                      v-for="item in views"
                      :key="item.zeroCodeId"
                      :value="item.zeroCodeId"
                      :style="radioStyle"
                      ><a-icon :type="item.icon"></a-icon>
                      {{ item.name }}</a-checkbox
                    ></a-checkbox-group
                  >
                </div>
              </template>
              <template slot="title">
                <span>使用视图</span>
              </template>
              <span class="Gray_bd Right text"
                >{{
                  options.recycle.type == "view"
                    ? options.recycle.view.length > 0
                      ? options.recycle.view.length + "个视图"
                      : "应用于指定的视图"
                    : "所有视图"
                }}
                <a-icon type="right"></a-icon
              ></span>
            </a-popover>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { findByMenuId } from "@/services/system/zerocode/app/designer";
export default {
  data() {
    return {
      height: window.innerHeight - 112,
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
      views: [],
    };
  },
  props: {
    menuId: String,
    options: {
      type: Object,
    },
  },
  mounted() {
    this.initViewList();
  },
  methods: {
    /**
     * 初始化视图
     */
    initViewList() {
      let that = this;
      /**
       * 获取列表配置项
       */
      findByMenuId({
        menuId: that.menuId,
        type: that.eipZeroCodeMenuType.view,
      }).then(function (result) {
        if (result.code === that.eipResultCode.success) {
          that.views = result.data;
        } else {
          that.$message.error(result.msg);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.switchBox {
  background: #fff;
  margin-left: 40px;
  padding-bottom: 32px;
  position: relative;
  overflow: auto;
}

.switchBox h5,
.switchBox h6,
.switchBox p {
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.switchBox div h5 {
  color: #333;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 32px;
  text-align: left;
}

.switchBox div p {
  color: #9e9e9e;
  font-size: 13px;
  margin-top: 8px;
}

.switchBox div ul {
  background: #fff 0 0 no-repeat padding-box;
  display: block;
  width: 640px;
}

.switchBox div ul li {
  align-items: center;
  border-left: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  display: flex;
  height: 48px;
  line-height: 48px;
  padding: 0 0 0 16px;
  width: 100%;
}

.switchBox div ul li.current {
  background: #2196f30d !important;
  border: 1px solid #2196f3 !important;
  position: relative;
  z-index: 1;
}

.switchBox div ul li.current .con {
  border-bottom: 0;
}

.switchBox div ul li:hover {
  background-color: #f7f7f7;
  cursor: pointer;
}

.switchBox div ul li:first-child {
  border-radius: 5px 5px 0 0;
  border-top: 1px solid #eaeaea;
}

.switchBox div ul li:last-child {
  border-bottom: 1px solid #eaeaea;
  border-radius: 0 0 5px 5px;
}

.switchBox div ul li:last-child .con {
  border-bottom: 0;
}

.switchBox div ul li.autoId {
  border-radius: 5px;
}

.switchBox div ul li.autoId > div {
  flex: 1;
  padding-left: 44px;
}

.switchBox div ul li.autoId .dele {
  color: #2196f3;
}

.switchBox div ul li .con {
  border-bottom: 1px solid #eaeaea;
  display: block;
  flex: 1;
  padding-right: 16px;
  position: relative;
}

.switchBox div ul li .con .rangeBox {
  left: 105%;
  position: absolute;
  top: 0;
}

.switchBox div ul li .batchIsOpen {
  color: #2196f3;
}

.switchBox div ul li .ming.Switch,
.switchBox div ul li .nullBox {
  height: 13px;
  transition: initial;
  vertical-align: middle;
  width: 26px;
}

.switchBox div ul li .ming.Switch .dot,
.switchBox div ul li .nullBox .dot {
  height: 11px !important;
  left: 1px !important;
  top: 1px !important;
  width: 11px !important;
}

.switchBox div ul li .ming.Switch--on .dot,
.switchBox div ul li .nullBox--on .dot {
  left: 14px !important;
}

.switchBox div ul li .ming.icon-visibility_off {
  color: #ee6f1f;
  margin-left: 5px;
}

.switchBox div ul li .ming.icon-navigate_next,
.switchBox div ul li span.text {
  line-height: 48px;
}

.mTop12 {
  margin-top: 12px !important;
}
.flexRow {
  margin-left: 4px;
}
.Gray_bd {
  color: #bdbdbd !important;
}
.Right,
.right {
  float: right !important;
}

/deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px !important;
}
</style>
